<template>
	<view class="container">
		<view class="content">
			<view class="pet_img" @tap="upPetAvatar">
				<image :src="pays.fromInfo.petAvatar" mode="">
				</image>
				<view class="">点击上传宠物图像</view>
			</view>
			<view class="pet_name pet_from_box">
				<view class="pet_item_box">
					<view class="pet_item_label">
						宠物昵称*
					</view>
					<view class="pet_item_value">
						<input type="text" v-model="pays.fromInfo.petName" placeholder="输入昵称" maxlength="15"
							:adjust-position="false" placeholder-style="color: #CACCCC" @blur="petNameBlur"
							@confirm="petNameConfirm" />
					</view>
				</view>
			</view>
			<view class="pet_info pet_from_box">
				<view class="pet_item_petType_box">
					<view class="pet_item_box">
						<view class="pet_item_label">
							宠物类型*
						</view>
						<view class="pet_item_value ">
							<view class="pet_item_value_option">
								<view :class="pays.fromInfo.petType == 0 ? 'selected' : ''" @tap="petType(0)">猫猫</view>
								<view :class="pays.fromInfo.petType == 1 ? 'selected' : ''" @tap="petType(1)">狗狗</view>
								<view :class="pays.fromInfo.petType == 2 ? 'selected' : ''" @tap="petType(2)">其它</view>
							</view>

						</view>
					</view>
					<view class="pet_item_petType_bottom">
						<view class="" v-if="pays.fromInfo.petType == 2">
							<input type="text" v-model="pays.fromInfo.petTypeName" placeholder="请填写" maxlength="15"
								:adjust-position="false" placeholder-style="color: #CACCCC" @blur="petTypeNameBlur"
								@confirm="petTypeNameConfirm" />
						</view>
					</view>

				</view>
				<view class="pet_item_box" v-if="[0,1].includes(pays.fromInfo.petType)">
					<view class="pet_item_label">
						宠物品种*
					</view>
					<view class="pet_item_value" @tap="openPopupBreeds">
						<view :class="pays.fromInfo.petBreeds ? 'pet_item_value_act' : 'pet_item_value_not'">
							{{pays.fromInfo.petBreeds || '选择宠物品种'}}
						</view>
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>
				<view class="pet_item_box">
					<view class="pet_item_label">
						宠物性别*
					</view>
					<view class="pet_item_value">
						<view class="pet_item_value_option">
							<view :class="pays.fromInfo.petSex == 0 ? 'selected' : ''" @tap="petSex(0)">公</view>
							<view :class="pays.fromInfo.petSex == 1 ? 'selected' : ''" @tap="petSex(1)">母</view>
							<view :class="pays.fromInfo.petSex == 2 ? 'selected' : ''" @tap="petSex(2)">不确定</view>
						</view>
					</view>
				</view>
				<view class="pet_item_box" v-if="pays.fromInfo.petType == 1">
					<view class="pet_item_label">
						宠物体型
					</view>
					<view class="pet_item_value">
						<view class="pet_item_value_option pet_body_size">
							<view :class="pays.fromInfo.petBodySize == 0 ? 'selected' : ''" @tap="petBodySize(0)">
								小型犬（10kg以下）</view>
							<view :class="pays.fromInfo.petBodySize == 1 ? 'selected' : ''" @tap="petBodySize(1)">
								中型犬（10kg-30kg）</view>
							<view :class="pays.fromInfo.petBodySize == 2 ? 'selected' : ''" @tap="petBodySize(2)">
								大型犬（30kg以上）</view>
						</view>
					</view>
				</view>
				<view class="pet_item_box">
					<view class="pet_item_label">
						出生日期
					</view>
					<view class="pet_item_value">
						<picker class="pet_item_value_picker" mode="date" :value="pays.fromInfo.petBirthday"
							:start="'1990-1-1'" :end="'2099-12-30'" @change="onBirthdayChange">
							<view class=""
								:class="pays.fromInfo.petBirthday ? 'pet_item_value_act' : 'pet_item_value_not'">
								{{pays.fromInfo.petBirthday || '请选择日期'}}
							</view>
						</picker>
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>

				<view class="pet_item_box">
					<view class="pet_item_label">
						绝育情况
					</view>
					<view class="pet_item_value">
						<view class="pet_item_value_option big_box">
							<view :class="pays.fromInfo.ifNeuter == 0 ? 'selected' : ''" @tap="ifNeuter(0)">已绝育</view>
							<view :class="pays.fromInfo.ifNeuter == 1 ? 'selected' : ''" @tap="ifNeuter(1)">未绝育</view>

						</view>
					</view>
				</view>
				<view class="pet_item_box">
					<view class="pet_item_label">
						免疫情况
					</view>
					<view class="pet_item_value">
						<view class="pet_item_value_option big_box">
							<view :class="pays.fromInfo.ifVaccinate == 0 ? 'selected' : ''" @tap="ifVaccinate(0)">已免疫
							</view>
							<view :class="pays.fromInfo.ifVaccinate == 1 ? 'selected' : ''" @tap="ifVaccinate(1)">未免疫
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="pet_character pet_from_box">
				<view class="pet_item_box pet_item_box_personality">
					<view class="pet_item_label">
						宠物性格
					</view>
					<view class="pet_item_value pet_item_value_personality" @tap="openPopup">
						{{pays.fromInfo.personality ? pays.fromInfo.personality: '描述您的爱宠性格和爱好，以便喂养员提供更好的服务。'}}
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_btn_box">
				<view class="xjs-btn-primary" @tap="saveBtn">保存</view>
				<view class="xjs-btn-primary btn_box" v-if="pays.query.id" @tap="delBtn">删除</view>
			</view>

		</view>
		<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
			<view class="popu_box">
				<view class="popu_title">
					宠物性格描述
				</view>
				<view class="popu_textarea">
					<textarea v-model="popupText" name="" id="" placeholder="输入宠物性格" maxlength="300"
						placeholder-style="color: #CACCCC" @blur="petPersonalityBlur"
						@input="petPersonalityInput"
						@confirm="petPersonalityConfirm"></textarea>
					<view class="text_length">{{popupText.length || 0}}<text>/300</text></view>
				</view>
				<view class="popu_quick">
					<view class="popu_quick_title">快捷输入</view>
					<view class="popu_quick_content">
						<view class="popu_quick_text" v-for="(quickItem,quickIndex) in petTagsConig" :key="quickIndex"
							@tap="quickAct(quickItem)">
							{{quickItem}}
						</view>
					</view>
				</view>
				<view class="popu_btn">
					<view class="xjs-btn-primary btn_box" @tap="closePopup(false)"> 取消</view>
					<view class="xjs-btn-primary" @tap="closePopup(true)"> 确定</view>
				</view>
			</view>

		</uni-popup>
		<uni-popup ref="popupRefBreeds" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
			<view class="popu_box popu_breeds_box">
				<view class="popu_title">
					选择品种
				</view>
				<view class="popu_search">
					<view class="popu_search_input">
						<image :src="iconUrl + '71.png'" mode=""></image>
						<input type="text" v-model="searchText" maxlength="15" :adjust-position="false"
							placeholder-style="color: #CACCCC" @input="petBreedsInput" @blur="petBreedsBlur"
							@confirm="petBreedsConfirm" placeholder="输入宠物品种" />
					</view>
					<view class="popu_search_btn" @tap="searchBtn">搜索</view>
				</view>
				<scroll-view class="popu_breeds_scroll" :scroll-y="true">
					
					<view class="" v-for="(itemBreeds,indexBreeds) in petBreedsArr" @tap="closePopupBreeds(itemBreeds)" :key="indexBreeds">
						{{itemBreeds}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	//import dayjs from '@/js_sdk/dayjs/dayjs.min.js'
	import { ref, reactive } from 'vue'
	import config from '@/config/index'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	import { accredit } from '@/hooks/useAppPermission/index';
	const { userInfo, access_token } = useUserStoreToRefs()
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const isBtn = ref(true)
	const popupRef = ref()
	const popupRefBreeds = ref()
	const popupText = ref('')
	const quickArr = ref()
	const searchText = ref('')
	interface fromInfoItem {
		petAvatar : string,
		petBirthday : string,
		petName : string,
		personality : string,
		ifNeuter : string | number,
		//ifAggressive : string | number,
		ifVaccinate : string | number,
		petSex : string | number,
		petType : string | number,
		petTypeName : string,
		petBodySize : string | number,
		petBreeds : string
	}
	onLoad(async (options) => {
		console.log(options.id)
		if (options.id) {
			pays.query.id = options.id
			await getPetDetail(pays.query.id)
			uni.setNavigationBarTitle({
				title: '编辑宠物'
			});
		} else {
			pays.query.id = ''
		}
		await getPetConfig()
	})
	onShow(() => {
		
	})
	const petDogConig = ref([])
	const petCatConig = ref([])
	const petTagsConig = ref([])
	const petBreedsArr = ref([])
	const pays = reactive<{
		query : Partial<{
			id : string | number
		}>
		fromInfo : Partial<fromInfoItem>
	}>({
		query: {},
		fromInfo: {
			petAvatar: 'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-15.png',
			ifNeuter: -1,
			//ifAggressive: -1,
			ifVaccinate: -1,
			petSex: -1,
			petType: -1,
			personality: '',
			petTypeName: '',
			petBreeds: ''
		}
	})
	const getPetConfig = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/content/backend-configs/getPetConfig`
		})
		console.log(res)
		if (res) {
			petDogConig.value = res.data['xjs.account.pet_breed_configuration.dog'].split(',')
			petCatConig.value = res.data['xjs.account.pet_breed_configuration.cat'].split(',')
			petTagsConig.value = res.data['xjs.account.pet_personality_tags'].split(',')
		}
	}
	const getPetDetail = async (id : any) => {
		const res : any = await api({
			method: 'get',
			url: `/mall/pet/getMyPet/${id}`
		})
		if (res) {
			//console.log(res.data)
			pays.fromInfo.petAvatar = res.data.petAvatar
			pays.fromInfo.petName = res.data.petNickName
			pays.fromInfo.petType = res.data.type
			pays.fromInfo.petSex = res.data.sex
			pays.fromInfo.petBirthday = res.data.birthday
			pays.fromInfo.ifVaccinate = res.data.ifVaccinate
			pays.fromInfo.ifNeuter = res.data.ifNeuter
			pays.fromInfo.personality = res.data.personality
			pays.fromInfo.petTypeName = res.data.TypeName
			pays.fromInfo.petBreeds = res.data.variety
			pays.fromInfo.petBodySize = res.data.bodyType
			console.log(petBreedsArr.value,'petBreedsArr.value')
		}
	}
	const upPetAvatar = async () => {
		// #ifdef APP
		const status = await accredit('CAMERA')
		if (status != 1) return
		const status2 = await accredit('READ_EXTERNAL_STORAGE')
		if (status2 != 1) return
		// #endif
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadImage(res.tempFilePaths[0])
			}
		})
	}
	const openPopup = () => {
		popupText.value = pays.fromInfo.personality
		popupRef.value.open('')

	}

	const closePopup = (type) => {
		if (type) {
			pays.fromInfo.personality = popupText.value.replace(/、$/, '。')
			//popupText.value = popupText.value;
		}
		popupRef.value.close()
	}
	const openPopupBreeds = async () => {
		petBreedsArr.value = pays.fromInfo.petType == 1 ? petDogConig.value : petCatConig.value
		await popupRefBreeds.value.open('')
	}
	const closePopupBreeds = (val) => {
		pays.fromInfo.petBreeds = val
		popupRefBreeds.value.close()
		searchText.value = ''
	}

	const searchBtn = () => {
		if (searchText.value != '') {
			let searchTextArr = petBreedsArr.value.filter((item) => {
				return item.indexOf(searchText.value) > -1
			}) || []
			console.log(searchTextArr)
			petBreedsArr.value = searchTextArr

		}

	}
	const petBreedsInput = ({ detail: { value } } : any) => {
		searchText.value = value
		
		
		
		if (searchText.value == '') {
			petBreedsArr.value = pays.fromInfo.petType == 1 ? petDogConig.value : petCatConig.value
		}
		
	}
	const petBreedsBlur = ({ detail: { value } } : any) => {
		searchText.value = value
		if (searchText.value == '') {
			petBreedsArr.value = pays.fromInfo.petType == 1 ? petDogConig.value : petCatConig.value
		}
	}
	const petBreedsConfirm = ({ detail: { value } } : any) => {
		searchText.value = value
		if (searchText.value == '') {
			petBreedsArr.value = pays.fromInfo.petType == 1 ? petDogConig.value : petCatConig.value
		}
	}
	const uploadImage = (filePath) => {
		uni.uploadFile({
			url: config.api + '/api/mall/pet/uploadPetPic',
			filePath: filePath,
			name: 'file',
			header: {
				'Authorization': access_token.value ? 'Bearer ' + access_token.value :
					'Basic bWFsbC1hcHA6bWFsbC1hcHA=',
				'x-flow-id': new Date().getTime(),
				"x-client-id": ""
			},
			success: async (uploadFileRes) => {
				console.log(JSON.parse((uploadFileRes.data)).data)

				pays.fromInfo.petAvatar = JSON.parse((uploadFileRes.data)).data
				//await setAvatarApi(JSON.parse((uploadFileRes.data)).data)
			},
			fail: (error) => {
				console.error(error);
			}
		})
	}


	const petNameBlur = ({ detail: { value } } : any) => {
		pays.fromInfo.petName = value
	}
	const petNameConfirm = ({ detail: { value } } : any) => {
		pays.fromInfo.petName = value
	}
	const petTypeNameBlur = ({ detail: { value } } : any) => {
		pays.fromInfo.petTypeName = value
	}
	const petTypeNameConfirm = ({ detail: { value } } : any) => {
		pays.fromInfo.petTypeName = value
	}
	const petPersonalityBlur = ({ detail: { value } } : any) => {
		popupText.value = value
		//pays.fromInfo.personality = value
	}
	const petPersonalityInput =({ detail: { value } } : any) => {
		popupText.value = value
		//pays.fromInfo.personality = value
	}
	const petPersonalityConfirm = ({ detail: { value } } : any) => {
		popupText.value = value
		//pays.fromInfo.personality = value
	}
	const onBirthdayChange = ({ detail: { value } } : any) => {
		pays.fromInfo.petBirthday = value
	}
	const petType = (e : any) => {
		pays.fromInfo.petType = e
		petBreedsArr.value = pays.fromInfo.petType == 1 ? petDogConig.value : petCatConig.value
	}
	const petSex = (e : any) => {
		pays.fromInfo.petSex = e
	}
	const petBodySize = (e : any) => {
		pays.fromInfo.petBodySize = e
	}
	const ifNeuter = (e : any) => {
		pays.fromInfo.ifNeuter = e
	}
	const ifVaccinate = (e : any) => {
		pays.fromInfo.ifVaccinate = e
	}
	/* const ifAggressive = (e : any) => {
		pays.fromInfo.ifAggressive = e
	} */
	const saveBtn = async () => {
		if (!pays.fromInfo.petAvatar) {
			return toastfnc('请上传宠物头像')
		}
		if (!pays.fromInfo.petName) {
			return toastfnc('请输入宠物姓名')
		}
		if (Number(pays.fromInfo.petType) < 0) {
			return toastfnc('请选择宠物类型')
		}
		if (Number(pays.fromInfo.petSex) < 0) {
			return toastfnc('请选择宠物性别')
		}
		if (!pays.fromInfo.petBirthday) {
			return toastfnc('请选择宠物出生日期')
		}
		if (Number(pays.fromInfo.ifNeuter) < 0) {
			return toastfnc('请选择是否绝育')
		}
		if (Number(pays.fromInfo.ifVaccinate) < 0) {
			return toastfnc('请选择是免疫')
		}
		if (!pays.fromInfo.personality) {
			return toastfnc('请填写宠物性格')
		}
		if (isBtn.value) {
			isBtn.value = false
			
			const res : any = await api({
				method: 'POST',
				url: `/mall/pet/saveOrUpdatePet`,
				data: {
					petAvatar: pays.fromInfo.petAvatar,
					petNickName: pays.fromInfo.petName,
					type: pays.fromInfo.petType, //宠物类型 0-猫 1-狗 2-其他
					sex: pays.fromInfo.petSex,
					id: pays.query.id ? pays.query.id : '', // 有ID 修改  无id 添加
					birthday: pays.fromInfo.petBirthday,
					ifVaccinate: pays.fromInfo.ifVaccinate, //是否按时接种 免疫 
					//ifAggressive: pays.fromInfo.ifAggressive, //是否有攻击力
					ifNeuter: pays.fromInfo.ifNeuter, // 是否绝育
					personality: pays.fromInfo.personality, //性格
					typeName: pays.fromInfo.petTypeName, // 其他类型宠物自定义名称
					variety: pays.fromInfo.petBreeds, //品种
					bodyType: pays.fromInfo.petBodySize //dog 体型
				}
			})
			if (res.code == 0) {
				if (pays.query.id) {
					toastfnc('修改成功!')
				} else {
					toastfnc('添加成功!')
				}
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)

			} else {
				isBtn.value = true
			}
		}

	}
	const quickAct = (val) => {
		if((popupText.value + val).length < 300) {
			popupText.value += `${val}、`
			
			
		} else {
			toastfnc('超出最长字数限制无法添加标签!')
		}
		
		
	}
	const delBtn = async () => {

		if (isBtn.value) {
			isBtn.value = false

			uni.showModal({
				title: '提示',
				content: '确认删除宠物吗?',
				success: async (res) => {
					if (res.confirm) {
						console.log(isBtn.value)
						const res : any = await api({
							method: 'DELETE',
							url: `/mall/pet/delPet/${pays.query.id}`,

						})
						console.log(isBtn.value, '1')
						if (res.code == 0) {
							toastfnc('删除成功!')
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)

						} else {
							isBtn.value = true
						}
					} else if (res.cancel) {

					}
				}

			})

		}

	}
	const toastfnc = (tipsText : string) => {
		uni.showToast({
			title: tipsText,
			icon: 'none'
		})

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F9F6F6;
		min-height: 100%;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.content {
		line-height: 1;

		.pet_from_box {
			width: 686rpx;
			margin: 0 auto;
			margin-bottom: 24rpx;
			padding: 32rpx;
			background-color: #fff;
			border-radius: 24rpx;
			box-sizing: border-box;

			.pet_item_box {
				display: flex;
				align-items: center;

				.pet_item_label {
					width: 176rpx;
					font-size: 28rpx;
					color: #1B2120;
					font-weight: bold;
				}

				.pet_item_value {
					width: 446rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 30rpx;
					color: #1B2120;
					word-break: break-word;

					.pet_item_value_not {
						color: #CACCCC;
					}

					.pet_item_value_act {
						color: #1B2120;
					}

					.pet_item_value_option {
						display: flex;
						align-items: center;

						textarea {
							width: 100%;
							height: 300rpx;
						}

						view {
							margin-right: 8rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							width: 120rpx;
							height: 70rpx;
							border-radius: 200rpx;
							border: 1rpx solid #CACCCC;
							box-sizing: border-box;
							font-size: 30rpx;
							color: #5C5E5E;
						}

						.selected {
							border: 1rpx solid #FF6084;
							color: #FF6084;
						}

					}

					.pet_body_size {
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						view {
							margin-bottom: 32rpx;
							padding: 20rpx 40rpx;
							width: auto;
						}

						view:last-child {
							margin-bottom: 0;
						}
					}

					.pet_item_value_picker {
						width: 100%;
						height: 30rpx;
					}

					.big_box {
						view {
							width: 184rpx;
						}
					}
				}

				.pet_item_value_weight {
					flex: 1;

					input {
						width: 80%;
					}

					text {
						flex: 1;
					}
				}
			}

			.pet_item_box_personality {
				display: flex;
				align-items: normal;

				.pet_item_value_personality {
					margin-top: -4rpx;
					line-height: 1.4;
					color: #1B2120;
				}
			}
		}

		.pet_img {
			padding: 40rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				margin-bottom: 20rpx;
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}

			view {
				font-size: 28rpx;
				color: #1B2120;
			}
		}

		.pet_info {
			.pet_item_box {
				margin-bottom: 40rpx;
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid rgba(204, 204, 204, 0.2);

			}

			.pet_item_petType_box {

				margin-bottom: 40rpx;
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid rgba(204, 204, 204, 0.2);

				.pet_item_box {
					margin-bottom: 0;
					padding-bottom: 0;
					border-bottom: none;
				}

				.pet_item_petType_bottom {
					display: flex;
					flex-direction: row-reverse;

					view {
						margin-top: 24rpx;
						padding: 0 24rpx;
						width: 446rpx;
						height: 70rpx;
						background-color: #F5F6F7;
						border-radius: 12rpx;
						box-sizing: border-box;

						input {
							width: 446rpx;
							height: 70rpx;
							box-sizing: border-box;
							line-height: 70rpx;
							font-size: 30rpx;
							color: #1B2120;
						}
					}

				}
			}


			.pet_item_box:last-child {
				border-bottom: none;
				margin-bottom: 0rpx;
				padding-bottom: 0rpx;
			}
		}
	}

	.popu_box {
		position: relative;
		background-color: #fff;
		height: 80vh;
		border-radius: 24rpx;
		padding: 40rpx;
		box-sizing: border-box;
		//margin-bottom: 48rpx;
		font-size: 30rpx;
		color: #1B2120;

		.popu_title {
			margin-bottom: 32rpx;
			padding-bottom: 32rpx;
			font-size: 32rpx;
			color: #1A1A1A;
			font-weight: bold;
			line-height: 1;
			border-bottom: 1rpx solid #F5F6F7;
		}

		.popu_textarea {
			margin-bottom: 48rpx;
			padding: 32rpx 32rpx 36rpx 32rpx;
			box-sizing: border-box;
			background-color: #F5F6F7;
			border-radius: 32rpx;
			height: 414rpx;
			line-height: 1.4;

			textarea {

				height: 90%;
			}

			.text_length {
				display: flex;
				justify-content: flex-end;

				text {
					color: #CACCCC;
				}
			}
		}

		.popu_quick {
			line-height: 1;

			.popu_quick_title {
				margin-bottom: 32rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				font-weight: bold;
			}

			.popu_quick_content {
				display: flex;
				flex-wrap: wrap;

				.popu_quick_text {
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					line-height: 1;
					padding: 16rpx 32rpx;
					border-radius: 8rpx;
					border: 1rpx solid #CACCCC;
					color: #5C5E5E;
					font-size: 26rpx;
				}

				.popu_quick_text_act {
					border: 1rpx solid #FF6084;
					color: #FF6084;
				}

			}
		}

		.popu_btn {
			position: absolute;
			left: 0;
			bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			view {
				width: 46%;
				//border-radius: 20rpx;
			}
		}
	}

	.popu_breeds_box {
		width: 100%;
		height: 80vh;
		.popu_title {
			text-align: center;
		}

		.popu_search {
			margin: 0 auto;
			width: 686rpx;
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.popu_search_input {
				display: flex;
				align-items: center;
				width: 80%;
				background-color: #F5F7F6;
				border-radius: 200rpx;
				padding: 24rpx 32rpx;
				box-sizing: border-box;

				image {
					margin-right: 28rpx;
					width: 32rpx;
					height: 32rpx;
				}

				input {
					width: 80%;
					font-size: 26rpx;
					line-height: 1;
				}
			}

			.popu_search_btn {
				color: #FF6084;
				font-size: 30rpx;
			}
		}

		.popu_breeds_scroll {
			margin: 0 auto;
			width: 686rpx;
			height: 80%;
			view {
				padding: 32rpx 0;
				border-bottom: 1rpx solid #F5F6F7;
			}

			view:last-child {
				border: none
			}
		}
	}


	.foot {
		line-height: 1;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		padding-top: 8rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		display: flex;
		justify-content: center;

		.foot_btn_box {
			display: flex;
			justify-content: center;
			width: 686rpx;


		}
	}

	.btn_box {
		background: #fff;
		color: #FF6084;
		box-sizing: border-box;
		border: 2rpx solid #FF6084;

	}
</style>